import React, { useCallback,useRef } from "react";
import { View,Image } from "@tarojs/components";
import "./index.scss";
import { followUser } from "@src/service";
import Taro from "@tarojs/taro";
import { useAppSelector } from "@src/store";

type Props = {
    userInfo:any
}

export default function PostNavBar (props:Props){
    const currentUserInfo = useAppSelector(state=>state.userInfo.data);
    const { userInfo } = props;
    const isFollowing = useRef(false);
    const handleClickFollow = useCallback(()=>{
        if(isFollowing.current){
           return; 
        }
        isFollowing.current = true;
        followUser(userInfo.uid).then(res=>{
            console.log(res);
        }).finally(()=>{
            isFollowing.current = false;
        });
    },[userInfo.uid]);
    const back = useCallback(()=>{
        Taro.navigateBack();
    },[]);
    
    return (<View className="postNavBar" style={{ height:44 }}>
        <View className="ionicons postNavBar__backIcon" onClick={back}>&#xf20d; </View>
        <View className="postNavBar__userInfo">
            <Image className="postNavBar__userInfo__avatar" src={userInfo.avatorUrl} />
            <View className="postNavBar__userInfo--right">
                <View className="postNavBar__userInfo__username">{userInfo.username}</View>
                <View>成都</View>
            </View>
        </View>
        <View className="postNavBar__rightBtn">
            {
                currentUserInfo.id == userInfo.uid ? null : <View className="postNavBar__followBtn" onClick={handleClickFollow}>+ 关注</View>
            }
        
        <View className="ionicons postNavBar__shareBtn"> &#xf13a;</View>

        </View>
    </View>);
}